<template>
  <div>
    <basic-layout title="我的办公物资" :showAddBtn="false">
      <div class="columnFlex">
        <!-- 查询条件 -->
        <!-- <van-row class="search-row">
          <van-search v-model="formData.shenqr" maxlength="20" show-action placeholder="申请人" @search="onRefresh">
            <template #action>
              <div @click="onRefresh">搜索</div>
            </template>
          </van-search>
          <div class="filter-icon">
            <van-icon name="filter-o" @click="$refs.queryPopupRef.show = true" />
          </div>
        </van-row> -->
        <!-- 列表 -->
        <van-row class="listCon">
          <van-pull-refresh class="pullRefresh" v-model="refreshLoading" @refresh="onRefresh">
            <van-list v-model="loading" :finished="finished" :finished-text="listData.length ? '没有更多了' : ''"
              @load="onLoad">
              <van-swipe-cell v-for="val in listData" :key="val.officeAppId">
                <div class="cellContent">
                  <div class="top">
                    <div class="flexTit">
                      <p class="title">{{ val.pinm }}</p>
                      <!-- <p class="other">
                        <span class="status" :class="'status' + val.SHENQZT">{{ val.sqztStatusName }}</span>
                      </p> -->
                    </div>
                  </div>
                  <div class="bottom">
                    <div class="left">
                      <p>
                        <span class="label">办公物资大类：</span>
                        {{ val.wzdlmc || "-" }}
                      </p>
                      <p>
                        <span class="label">办公物资小类：</span>
                        {{ val.wzxlmc }}
                      </p>
                      <p>
                        <span class="label">配置（领用）日期：</span>
                        {{ val.shengcsj || "-" }}
                      </p>
                    </div>
                    <!-- <div class="right" v-if="val.SHENQZT === '01' || '04' == val.SHENQZT">
                      <van-button color="#f25454" plain round size="mini" @click="handleDelete(val)">取消申请</van-button>
                    </div> -->
                  </div>

                  <!-- <div class="flexBtn" v-if="val.SHENQZT === '01'">
                    <p @click="handleUpdate(val)">编辑</p>
                    <p @click="handleDelete(val)">删除</p>
                  </div> -->
                </div>
              </van-swipe-cell>
            </van-list>
            <van-empty v-if="!loading && !listData.length" class="custom-image"
              :image="require('../../../assets/images/empty.png')" description="暂无数据" />
          </van-pull-refresh>
        </van-row>
      </div>
    </basic-layout>
    <!-- 筛选条件弹出框 -->
    <queryPopup ref="queryPopupRef" @handleSearch="defineSearch" @handleReset="handleReset">
      <van-form class="filterBox">
        <label>申请人：</label>
        <van-field v-model="formData.shenqr" placeholder="请填写申请人" />
        <label>领用人：</label>
        <van-field v-model="formData.suosry" placeholder="请填写领用人" />
        <label>申请状态：</label>
        <van-field>
          <template #input>
            <div class="textCon" @click="showPicker = true">
              <span v-if="!canteenText" style="color: #aaa">请选择申请状态</span>
              <span v-else>{{ canteenText }}</span>
            </div>
          </template>
        </van-field>
      </van-form>
    </queryPopup>
    <!-- 申请状态选择 -->
    <van-action-sheet v-model="showPicker" cancel-text="取消" :actions="appStatusList" @select="onConfirm" />
    <!-- 详情 弹出框 -->
    <fullscreenModal :modal="fullscreenDetailModal" label="办公物资申请" editType='detail' :isShowEdit="false"
      @handleClose="fullscreenDetailModal = false" @handleCancel="editType = 'detail'">
      <detail-form @close="fullscreenDetailModal = false" ref="detailFormRef" @refresh="onRefresh" />
    </fullscreenModal>
    <full-loading v-if="fullLoading"></full-loading>
  </div>
</template>

<script>
import { queryMySupplies } from "@/api/srvAssurance/assetLabel/assetLabel";
export default {
  components: {},
  data() {
    return {
      currentParam: {}, // 保存当前查看详情的row数据
      loading: false,
      fullLoading: false,
      refreshLoading: false,
      fullscreenModal: false,
      fullscreenDetailModal: false,
      showPicker: false,
      showTimePicker: false,
      showCancelModal: false,
      finished: false,
      formData: {
        shenqr: '',
        suosry: '',
        shenqzt: '',
        pageNum: 1,
        pageSize: 20
      },
      canteenText: "",
      listData: [], // 列表数据
      appStatusList: [
        { value: "01", name: "草稿" },
        { value: "02", name: "申请提交" },
        { value: "03", name: "申请通过" },
        { value: "04", name: "申请驳回" },
        { value: "05", name: "发放中" },
        { value: "06", name: "发放完成" }], // 申请状态列表
      isAdd: false,
      editType: "",
      cancelFormData: {
        officeAppId: '', // 取消标识
        cancelReason: '', // 取消原因
      }
    };
  },
  created() {
    this.getListData();
  },
  mounted() {

  },
  methods: {
    // 获取表格数据
    getListData() {
      this.loading = true;
      queryMySupplies(this.formData).then((res) => {
        this.loading = false;
        if (res.data.length > 0) {
          res.data.forEach(element => {
            if (element.SHENQZT == '01') {
              element.sqztStatusName = "草稿";
            } else if (element.SHENQZT == '02') {
              element.sqztStatusName = "申请提交";
            } else if (element.SHENQZT == '03') {
              element.sqztStatusName = "申请通过";
            } else if (element.SHENQZT == '04') {
              element.sqztStatusName = "申请驳回";
            } else if (element.SHENQZT == '05') {
              element.sqztStatusName = "发放中";
            } else if (element.SHENQZT == '06') {
              element.sqztStatusName = "发放完成";
            }
          });
          this.listData = [...this.listData, ...res.data];
          if (this.listData.length >= res.totalCount) {
            this.finished = true;
          }
        } else {
          this.finished = true;
        }
      }).catch(() => {
        this.loading = false;
        this.finished = true;
      });
    },
    // 确定筛选
    defineSearch() {
      this.$refs.queryPopupRef.show = false;
      this.onRefresh()
    },
    onRefresh() {
      this.refreshLoading = false;
      this.finished = false;
      this.listData = [];
      this.formData.pageNum = 1;
      this.getListData();
    },
    onLoad() {
      this.formData.pageNum++;
      this.getListData();
    },
    // 重置
    handleReset() {
      this.formData = {
        shenqr: '',
        suosry: '',
        shenqzt: '',
        pageNum: 1,
        pageSize: 20
      };
      this.canteenText = "";
      this.onRefresh();
    },
    //申请状态选择
    onConfirm(item) {
      this.formData.shenqzt = item.value;
      this.canteenText = item.name;
      this.showPicker = false;
    },
    // 查看详情
    async handleDetail(param) {
      this.fullscreenDetailModal = true;
      this.editType = "detail";
      this.isAdd = false;
      this.$refs.detailFormRef.getSearch(param);

    },

  },
};
</script>

<style scoped lang="less">
.listCon {
  .cellContent {
    .top {
      padding: 0 10px;
      box-sizing: border-box;
      border-bottom: 1px solid #eee;
    }

    .bottom {
      padding: 5px 10px;
      box-sizing: border-box;
      display: flex;
      overflow: hidden;
      align-items: center;

      .left {
        flex: 1;
        overflow: hidden;
      }

      .right {
        margin-left: 10px;

        img {
          width: 35px;
          height: 35px;
          display: block;
          margin: 0 auto 10px;
        }

        .van-button--mini {
          border-radius: 3px;
        }
      }
    }

    .flexTit {
      .other {
        text-align: right;

        .status {
          border-radius: 2px;
          padding: 3px 6px;
          color: green;
          // background: #dbf7db;
        }

        .status2 {
          border-radius: 2px;
          padding: 3px 6px;
          color: green;
          // background: #dbeff7;
        }

        .status1 {
          color: red;
          // background: #f9dbe7;
        }

        .status4 {
          color: red;
          // background: #f9dbe7;
        }
      }
    }

    .people {
      color: #bbb;
      font-size: 12px;
    }

    .flexBtn {
      display: flex;
      justify-content: space-between;

      p {
        flex: 1;
        text-align: center;
        height: 40px;
        line-height: 40px;
        color: #4eb3e9;
        font-size: 15px;
      }

      p:nth-of-type(1) {
        box-sizing: border-box;
        border-right: 1px solid #eee;
        color: #f25454;
      }
    }
  }
}
</style>